import EchartsWrap from '@/components/widgets/EchartsWrap';
import React, { useEffect, useState } from 'react';
import _cloneDeep from 'lodash/cloneDeep';

const fontColor = 'rgba(255,255,255, 0.7)';
const option2 = {
  backgroundColor: 'transparent',
  grid: {
    left: '0',
    right: '0',
    top: 10,
    bottom: '8%',
    containLabel: true,
  },
  tooltip: {
    show: true,
    trigger: 'axis',
  },
  legend: {
    show: false,
  },
  xAxis: {
    type: 'category',
    axisLabel: {
      color: fontColor,
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: 'rgba(255,255,255,.2)',
      },
    },
    axisTick: {
      show: false,
    },
    splitLine: {
      show: false,
    },
    data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
  },

  yAxis: [
    {
      type: 'value',
      name: '',
      min: 0,
      // max: 1000,
      axisLabel: {
        formatter: '{value}',
        textStyle: {
          color: 'rgba(255,255,255, 0.7)',
        },
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(255,255,255,.2)',
        },
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(255,255,255, 0.1)',
          type: 'dashed',
        },
      },
    },
  ],
  series: [
    {
      name: '',
      type: 'line',
      smooth: true,
      showSymbol: false,
      itemStyle: {
        normal: {
          color: '#2FB0FF',
          lineStyle: {
            color: '#2FB0FF',
            width: 1,
          },
        },
      },
      data: [60, 72, 90, 64, 90, 70, 66, 82, 91, 64, 90, 60],
    },
  ],
};

const SafeRateChart = ({ last30DayData }) => {
  const [chartData, setChartData] = useState(option2);
  useEffect(() => {
    const newCfg = _cloneDeep(option2);
    const [xAxisData, sData] = last30DayData
      .reverse()
      .slice(0, 30)
      .reduce(
        (r, { belongDate, safeProduceIndex }) => {
          r[0].push(belongDate.slice(8));
          r[1].push(safeProduceIndex);
          return r;
        },
        [[], []],
      );
    newCfg.xAxis.data = xAxisData;
    newCfg.series[0].data = sData;
    setChartData(newCfg);
  }, [last30DayData]);
  return <EchartsWrap option={chartData} style={{ height: 156 }} />;
};

export default SafeRateChart;
